本日小作品：
https://codepen.io/linchinhsuan/pen/YzqbvoB

var liArray = document.querySelectorAll(".nav li a");
var len = liArray.length;
for(var i=0;i<len;i++){
    liArray[i].dataset.num = i;
};

用querySelectorAll選取導覽列中的每一個a連結，最終結果會是一陣列，並賦值於變數liArray上。
dataset是可以讓我們自定義的屬性，最終呈現起來會看起來像是data-num="1"，基本的規則是會以data-開頭，後面名稱可以自定義。這裡我們使用for迴圈而不是直接寫在html裡面。
透過for迴圈，讓陣列中的每一個a連結的設定一個dataset屬性，名稱叫做num，值則是i。
最終我們就可以得到像是data-num="0"......每一個a連結都有不同的值。

var nav = document.querySelector(".nav");
var box = document.querySelector(".hoverBox");
nav.addEventListener('mouseover',function(e){
    if(e.target.nodeName !== 'A'){return};
    var num = e.target.dataset.num;
    box.style.opacity = 1;
    box.style.left = (num)*64 + "px";
},false)

在導覽列上做滑鼠移入的事件監聽，當滑鼠移動到非a連結的時候，則觸發if判斷式，這裡透過return空值來達到跳過後面程式碼，所以什麼也不會發生。
反之，當滑鼠移動到a連結上時，則他獨一無二的data-num會被變數num記錄起來。
然後讓色塊透明度從0變成1，之後因為原本就是使用絕對定位，透過不同的編號，編號0的話就是停在left:0的位置，因為每個a連結寬度都是一樣的，所以隨著編號的改變，色塊就會跑到對應的位置上。

nav.addEventListener('mouseout',function(){
    box.style.opacity = 0;
},false)

最後，當滑鼠移開導覽列時讓色塊消失。
這裡也展現了事件監聽的特色，可以在同一元素上綁定一個以上的事件。

－－－

本作品原典出自於：
https://forum.gamer.com.tw/

－－－

本日結語：
今天是十八天，今天主要是看到巴哈導覽列色塊會隨之移動覺得很有趣，就嘗試做做看，如有寫錯之處麻煩各路高手指教><